<template>
    <div id="chartRing"></div>
</template>

<script setup>
import { ref, onMounted, computed, markRaw, watch } from "vue"
import * as echarts from 'echarts'

// 接受父组件的数据
const props = defineProps({
    trafficWay: {
        type: Array,
        default: []
    },
    title: {
        type: String,
        default: ''
    }
})

const parentData = computed(() => props.trafficWay)

// 监听父组件数据的变化
watch(() => parentData , (newValue) => {
        // 先销毁组件
        if (chartRing.value) {
            echarts.dispose(chartRing.value)
        }
        chartRing.value = markRaw(echarts.init(document.getElementById('chartRing')))
        createRingChart(chartRing.value)
    },
    { immediate: false, deep: true }
)

// 图表对象
const chartRing = ref(null)


const createRingChart = (chart) => {
    var data = [];
    const sum = parentData.value.reduce((accumulator, currentValue) => accumulator + currentValue.value, 0);

    var color = ['#56FFD7', '#6DA7FF', '#2B64FF', '#68FF83', '#8792FF', '#F6FD6A'];
    for (var i = 0; i < parentData.value.length; i++) {
        data.push(
            {
                value: ((parentData.value[i].value / sum) * 100).toFixed(1),
                name: parentData.value[i].name,
                itemStyle: {
                    borderWidth: 5,
                    shadowBlur: 2,
                    borderColor: color[i],
                    shadowColor: color[i]
                },
            }
        )
    }
    const seriesOption = [
        {
            name: '',
            type: 'pie',
            clockwise: false,
            radius: [70, 80],
            emphasis: {
                scale: true
            },
            labelLine: {
                length: 10,
                length2: 14,
            },
            label: {
                show: false,
                // position: 'outer',
                // alignTo: 'labelLine',
                // // ·圆点
                // backgroundColor: 'inherit',
                // height: 0,
                // width: 0,
                // lineHeight: 0,
                // distanceToLabelLine: 0,
                // borderRadius: 2.5,
                // padding: [2.5, -2.5, 2.5, -2.5],
                // formatter: function (params) {
                //     if (params.name !== '') {
                //         return `{a|${params.name}：}{b|${params.value}个}`;
                //     } else {
                //         return '';
                //     }
                // },
                // rich: {
                //     a: {
                //         padding: [0, 0, 0, 10],
                //         color: '#fff'
                //     },
                //     b: {
                //         padding: [0, 10, 0, 0],
                //         color: '#fff'
                //     },
                // }
            },
            data: data,
        }
    ];
    let option = {
        // backgroundColor: '#021124',
        color: color,
        title: [{
            text: props.title + '地区',
            top: '46%',
            textAlign: 'center',
            left: '50%',
            textStyle: {
                color: '#fff',
                fontSize: 16,
                fontWeight: '400',
            }
        }],
        tooltip: {
            show: true,
            trigger: 'item',
            formatter: '{b} : {c}%'
        },
        legend: {
            orient: 'vertical',
            left: "30",
            top: 'middle',
            itemWidth: 10,
            itemHeight: 10,
            textStyle: { //图例文字的样式
                color: '#89BFE5',
                fontSize: 12,
                padding: 5
            }
        },
        toolbox: {
            show: false,
        },
        series: seriesOption,
    };
    chart.setOption(option);
}

const resize = () => {
    chartRing.value.resize();
}

onMounted(() => {
    chartRing.value = markRaw(echarts.init(document.getElementById('chartRing')))
    createRingChart(chartRing.value)

    window.addEventListener("resize", resize);
})


</script>

<style lang="scss" scoped>
#chartRing {
    width: 100%;
    height: 100%;
}
</style>